<script setup lang="ts">
import { Tools,Monitor } from '@element-plus/icons-vue'
const props = defineProps<Props>();
interface Props {
  title: string;
  content: string;
  description:string;
  connStatus:boolean;
  wsStatus:boolean;
  rtcStatus:boolean;
}

</script>

<template>
  <div class="flex justify-between items-center ">
    <div class="flex items-center">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-lg bg-gradient-to-r from-col2 to-col1">
        <el-icon size="26" color="white" ><Monitor /></el-icon>
      </div>
      <div class="inline-block ml-2">
        <div>
          <p class="font-bold">{{ props.title }}</p>
        </div>
        <div>
          <el-text>
            {{ props.content }}
          </el-text>
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-lg bg-gradient-to-r from-col2 to-col1">
        <el-icon size="26" color="white" ><Tools /></el-icon>
      </div>
      <div class="ml-2">
        <el-text tag="b">{{props.connStatus?"已连接":"未连接"}}</el-text>
        <br/>
        <el-text >{{ props.description }}</el-text>
        <div>
          <el-text>
            ws
            <el-link underline="never" type="success"  v-show="props.wsStatus">
              <el-text type="success">已连接</el-text>
            </el-link>
            <el-link underline="never" type="info" v-show="!props.wsStatus">
              <el-text type="info">未连接</el-text>
            </el-link>
            <el-divider direction="vertical" />
            rtc
            <el-link underline="never" type="success" v-show="props.rtcStatus">
              <el-text type="success">已连接</el-text>
            </el-link>
            <el-link underline="never" type="info" v-show="!props.rtcStatus">
              <el-text type="info">未连接</el-text>
            </el-link>
          </el-text>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
